<style>
	.header-nav {
		height: 40px;
		display: flex;
		width: 10rem;
		background: #fff;
	    position: sticky;
	    top: 0;
	    left: 0;
	    z-index: 2;
	}
	.left-btn {
		width: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.left-btn .icon-home {
		font-size: 20px;
		font-weight: bold;
		color: #666;
		flex: 1;
		height: 40px;
		width: 100%;
		line-height: 40px;
		text-align: center;
	}
	.right-btn {
		width: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.center-title {
		text-align: center;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
	}
	.center-title>div {
		font-size: 14px;
	}
</style>
<template>
	<div class="header-nav scale-bottom-1px">
		<div  class="left-btn">
			<span  @click="goToHome" v-if="!$slots.headerLeftBtn" class="icon-home"></span>
			<slot v-else name="headerLeftBtn"></slot>
		</div>
		<div class="center-title">
			<slot></slot>
		</div>
		<div class="right-btn">
			<slot name="headerRightBtn"></slot>
		</div>
	</div>
</template>
<script>
	import utils from '@utils'
	export default {
		name: 'headerNav',
		methods: {
			goToHome() {
				utils.goToPage("index.html");
			}
		}
	}
</script>